<template>
  <div  v-transfer-dom>
    <popup v-model="showPopup" height="100%" is-transparent>
      <div class="select_popup_div">
        <div class="appeal_reason">
          <div class="title">驳回原因</div>
          <checker
            type="checkbox"
            class="select_checker"
            v-model="refuseKeywords"
            default-item-class="check_mian_item"
            selected-item-class="check_mian_item_selected"
          >
            <checker-item
              v-for="(po , index) in reasonList"
              :key="index"
              :value="po.id"
            >{{po.keyword}}</checker-item>
          </checker>

          <div class="border_main reason_box div_magin10">
            <x-textarea
              :max="30"
              class="dskt_text_area"
              placeholder="详情原因,最大字数30字"
              v-model="refuseReason"
            ></x-textarea>
          </div>
        </div>

        <div class>
          <flexbox :gutter="0">
            <flexbox-item>
              <div class="select_button">
                <x-button type="primary" id="out_btn" @click.native="doCancel" class="dskt_btn">返回</x-button>
              </div>
            </flexbox-item>
            <flexbox-item>
              <div class="select_button">
                <x-button type="primary" @click.native="doOk" class="dskt_btn">确定</x-button>
              </div>
            </flexbox-item>
          </flexbox>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import baseService from "../shared/service/baseService";

import {
  PopupHeader,
  Popup,
  XTextarea,
  TransferDom,
  Group,
  XSwitch,
  Checker,
  CheckerItem
} from "vux";

export default {
  components: {
    PopupHeader,
    Popup,
    Group,
    Checker,
    XTextarea,
    CheckerItem,
    XSwitch
  },
  name: "selectAppealRefuse",
  props: ["okText", "noText"] /* okEvent 文件上传完成事件 */,
  data() {
    return {
      reasonList: [],
      showPopup: false,
      dataId: "",
      refuseKeywords: [],
      refuseReason: ""
    };
  },
  created() {
    this.doGetReasonList();
  },
  methods: {
    doGetReasonList() {
      baseService.getAppealRefuseList().then(res => {
        var data = res.data;
        var cehuiList = [];
        for (let i = 0; i < data.length; i++) {
          const element = data[i];
          element.key = element.id;
          element.value = element.keyword;
          cehuiList.push(element);
        }
        this.reasonList = cehuiList;
      });
    },
    changeReason(value, label) {
      this.$emit("okEvent", this.dataId, label, this.showType);
      this.showPopup = false;
    },
    doCancel() {
      this.showPopup = false;
    },
    doOk() {
      if (this.refuseKeywords.length == 0 && this.refuseReason=='') {
        this.$vux.toast.text("请设置驳回原因");
        return;
      }
      var keys = [];
      for (let j = 0; j < this.refuseKeywords.length; j++) {
        const refuseKey = this.refuseKeywords[j];
        for (let i = 0; i < this.reasonList.length; i++) {
          const element = this.reasonList[i];
          if (element.id == refuseKey) {
            keys.push(element.value);
            break;
          }
        }
      }
      this.$emit("okEvent", this.dataId, keys.join(","), this.refuseReason);
      this.showPopup = false;
    },
    show(id) {
      //cehui cexiao
      this.showPopup = true;
      this.dataId = id;
    }
  }
};
</script>

<style scoped>

</style>